<template>
  <div>
    <div class="page-title" style="width:100%">任务列表</div>
    <div class="page-content">
      <el-row :gutter="10">
        <el-form label-width="87px" :inline="true" :model="filterQuery">
          <el-row>
            <el-form-item label="检查时间">
              <el-col :span="11">
                <el-date-picker
                  v-model="filterQuery.taskDate"
                  type="year"
                  placeholder="选择年"
                  style="width: 200px;"
                  format="yyyy 年"
                  value-format="yyyy"
                >
                </el-date-picker>
                <!-- <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年"
                  value-format="yyyy"
                  v-model="filterQuery.taskDate"
                  style="width: 200px;"
                ></el-date-picker> -->
              </el-col>
            </el-form-item>
            <el-form-item label="审核轮次">
              <el-input
                placeholder="输入轮次"
                v-model="filterQuery.round"
                style="width: 200px;"
                clearable=""
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleGetTask"
                >查询</el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleCreateTask = true"
                >新建任务</el-button
              >
            </el-form-item>
          </el-row>
        </el-form>
      </el-row>
      <!--/div-->
      <!--div class="page-list"-->
      <el-row
        style="padding:10px; border-top: 2px dashed #dddddd;text-align:center"
      >
        <el-table
          :data="tableData"
          style="width: 100%"
          max-height="560"
          border
          v-loading="loading"
        >
          <el-table-column
            type="index"
            label="序号"
            align="center"
            :index="this.indexStartNum"
          ></el-table-column>
          <el-table-column
            prop="taskDate"
            label="时间"
            width="300"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="round"
            label="轮次"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="taskName"
            label="任务名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="status"
            label="任务状态"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" width="400px" align="center">
            <template slot-scope="scope">
              <div class="inline-td">
                <el-button
                type="primary"
                icon="el-icon-edit"
                size="mini"
                @click="handleGetAuditGroup(scope.row)"
                :disabled="scope.row.status === '完成'">
                  审核组设置
                </el-button>
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  @click="handleAlter(scope.row)"
                  :disabled="scope.row.status === '完成'"
                  >修改</el-button
                >
                <el-button
                  size="mini"
                  type="primary"
                  icon="el-icon-edit"
                  @click="handleEdit(scope.row.auditTaskID)"
                  :disabled="scope.row.status === '完成'"
                  >结束</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  icon="el-icon-delete"
                  @click="handleDeleteTask(scope.row.auditTaskID)"
                  :disabled="scope.row.status === '完成'"
                  >删除</el-button
                >
              </div>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog
          title="新建任务"
          :visible.sync="handleCreateTask"
          width="600px"
        >
          <el-form :model="tasks" label-width="auto" :rules="rules" ref="tasks">
            <el-form-item label="任务名称" prop="taskName">
              <el-input
                v-model="tasks.taskName"
                autocomplete="off"
                placeholder="输入任务名称"
                style="width:80%"
              ></el-input>
            </el-form-item>
            <el-form-item label="任务时间" prop="taskDate">
              <el-date-picker
                v-model="tasks.taskDate"
                 type="year"
                 format="yyyy 年"
                value-format="yyyy"
                placeholder="选择年"
                style="width:80%"
              >
              </el-date-picker>
              <!-- <el-date-picker
                v-model="tasks.taskDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年"
                value-format="yyyy"
                style="width:80%"
              >
              </el-date-picker> -->
            </el-form-item>
            <el-form-item label="审核轮次" prop="round">
              <el-input
                placeholder="输入轮次"
                v-model="tasks.round"
                style="width:80%"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="handleCreateTask = false">取 消</el-button>
            <el-button type="primary" @click="cresteSucceedTask('tasks')"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <el-dialog
          title="修改任务"
          :visible.sync="alterTaskVisible"
          width="600px"
        >
          <el-form
            :model="alters"
            label-width="auto"
            :rules="rules"
            ref="alters"
          >
            <el-form-item label="任务名称" prop="taskName">
              <el-input
                v-model="alters.taskName"
                autocomplete="off"
                placeholder="输入任务名称"
                style="width:80%"
              ></el-input>
            </el-form-item>
            <el-form-item label="任务时间" prop="taskDate">
              <el-date-picker
                v-model="alters.taskDate"
                type="year"
                format="yyyy 年"
                value-format="yyyy"
                placeholder="选择年"
                style="width:80%"
              >
              </el-date-picker>
              <!-- <el-date-picker
                v-model="alters.taskDate"
                type="date"
                placeholder="选择日期"
                format="yyyy 年"
                value-format="yyyy"
                style="width:80%"
              > 
              </el-date-picker>-->
            </el-form-item>
            <el-form-item label="监督轮次" prop="round">
              <el-input
                placeholder="输入轮次"
                v-model="alters.round"
                style="width:80%"
              ></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="alterTaskVisible = false">取 消</el-button>
            <el-button type="primary" @click="alterSucceedTask('alters')"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <div class="pagination-base">
          <el-pagination
            @current-change="handlePageChange"
            :current-page="filterQuery.pageIdx"
            :page-size="filterQuery.pageSize"
            :total="filterQuery.total"
            background
            layout="total, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </el-row>
    </div>
    <el-dialog title="提示" :visible.sync="dialogFinishVisible" width="30%">
      <span>此操作将永久结束这个任务, 是否继续?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFinishVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitFinish">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <span>此操作将永久删除该条记录, 是否继续?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitDelet">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  CreateTask,
  GetTask,
  AlterTask,
  DeleteTask,
  FinishTask,
} from "../../../services/hse_task_management"
//import { getDay } from "./time";
import Vue from "vue"
import VueCookies from "vue-cookies"
Vue.use(VueCookies)
export default {
  data() {
    return {
      tableData: [],
      filterQuery: {
        taskDate: "",
        round: "",
        total: 0,
        pageIdx: 0,
        pageSize: 10,
      },
      tasks: {
        taskName: "",
        taskDate: "",
        round: "",
      },
      alters: {
        taskName: "",
        taskDate: "",
        round: "",
        auditTaskID: "",
        status: "",
        taskStaffID: "",
        taskStaffName: "",
      },
      indexStartNum: 1,
      dialogFinishVisible: false,
      dialogVisible: false,
      alterTaskVisible: false,
      handleCreateTask: false,
      total: 0,
      rules: {
        name: [{ required: true, message: "请输入任务名称", trigger: "blur" }],
        dates: [{ required: true, message: "请输入时间", trigger: "change" }],
        round: [{ required: true, message: "请输入伦次", trigger: "blur" }],
      },
      statuss: [
        {
          label: "已接收",
          value: "已接收",
        },
        {
          label: "未接收",
          value: "未接收",
        },
      ],
      DeleteTaskCode: "",
    }
  },
  mounted() {
    this.handleGetTask()
  },
  methods: {
    // 结束任务
    handleEdit(auditTaskID) {
      this.auditTaskID = auditTaskID
      console.log("4", this.auditTaskID)
      this.dialogFinishVisible = true
    },
    // 二次确认结束
    submitFinish() {
      FinishTask({ auditTaskID: this.auditTaskID }).then(() => {
        this.handleGetTask(this.tasks)
      })
      this.dialogFinishVisible = false
    },
    // 删除任务
    handleDeleteTask(auditTaskID) {
      this.auditTaskID = auditTaskID
      this.dialogVisible = true
      this.handleGetTask()
    },
    // 网络请求删除数据
    deleteTask() {
      DeleteTask({ auditTaskID: this.auditTaskID })
        .then((res) => {
          this.$message.success("删除成功")
          this.handleGetTask(this.tasks)
          console.log("s", res)
        })
        .catch((e) => {
          console.log(e)
          this.$message.error("删除失败")
        })
    },
    // 二次确认删除数据
    submitDelet() {
      this.dialogVisible = false
      this.deleteTask()
    },
    //   修改任务
    handleAlter(row) {
      // console.log("w", row)
      const {
        auditTaskID,
        taskName,
        round,
        taskDate,
        status,
        taskStaffID,
        taskStaffName,
      } = row
      this.alters = {
        ...this.alters,
        auditTaskID,
        taskName,
        round,
        taskDate,
        status,
        taskStaffID,
        taskStaffName,
      }
      this.alterTaskVisible = true
    },
    alterSucceedTask(alter) {
      // console.log(7,this.$refs[alter])
      this.$refs[alter].validate((valid) => {
        if (valid) {
          AlterTask(this.alters).then(
            () => {
              this.alterTaskVisible = false
              console.log("q", "CreateTask(this.tasks)")
              this.$message.success("操作成功")
              this.$refs[alter].resetFields()
              this.handleGetTask()
            },
            (err) => {
              console.log(1,err)
              this.$message.error(err.message)
            }
          )
        } else {
          this.$notify.warning({
            title: "温馨提示",
            message: "请检查必填项",
          })
          return false
        }
      })
    },
    //   创建任务
    cresteSucceedTask(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(77,valid)
        if (valid) {
          console.log("e", valid)
          CreateTask(this.tasks).then(
            () => {
              this.handleCreateTask = false
              console.log("r", "CreateTask(this.tasks)")
              this.$message.success("操作成功")
              this.$refs[formName].resetFields()
              this.handleGetTask()
            },
            (err) => {
              this.$message.error(err.message)
            }
          )
        } else {
          this.$notify.warning({
            title: "温馨提示",
            message: "请检查必填项",
          })
          return false
        }
      })
    },
    // 查询
    handleGetTask() {
      console.log("rr", this.filterQuery)
      let filterQuery = {
        taskDate: this.filterQuery.taskDate || "",
        round: this.filterQuery.round,
        num: this.filterQuery.pageIdx,
        size: this.filterQuery.pageSize,
      }
      console.log("u", filterQuery)
      GetTask(filterQuery).then((res) => {
        console.log("e", res.data)
        this.indexStartNum =
          this.filterQuery.pageIdx * this.filterQuery.pageSize + 1
        this.tableData = res.data.list
        this.filterQuery.total = res.data.total
      })
    },
    // 改变页码
    handlePageChange(page) {
      this.filterQuery.pageIdx = page
      this.handleGetTask()
    },
    alterSucceedRole() {},
    handleGetDate() {},
    loaddata() {},
    handleGetAuditGroup(row) {
      row = JSON.stringify(row)
      this.$router.push({
        path: '/hseAudit/auditGroup/index',
        query: {row}
      })
    }
  },
}
</script>

<style>
.el-table th.gutter {
    display: table-cell!important;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.search-label {
  display: flex;
}
.line {
  text-align: center;
}
.page-content {
  margin-top: 35px;
}
.task_delete {
  margin-left: 15px;
}
.detail {
  margin-right: 15px;
}
</style>
